import React, { useEffect, useState, useRef } from "react";
import './style/home.css';
import addPic from './style/images/add.png';
import { Input, Layout, Button, Radio, Skeleton, Switch, Card, Avatar, Tree } from 'antd';
import { DeleteOutlined, OneToOneOutlined, DownloadOutlined } from '@ant-design/icons';
import { request } from 'dw-mx-request';
import { Modal } from "dw-mx";
import { useHistory, useLocation } from 'dw-mx-router';

export default function Home(props) {

    const { Sider } = Layout;
    const { Search } = Input;
    const { Meta } = Card;
    const history = useHistory();
    const [appList, setAppList] = useState([]);
    const [appName, setAppName] = useState('');
    const [appID, setAppID] = useState('');
    const [inputAppNameShow, setInputAppNameShow] = useState(false);


    useEffect(() => {
        initApps();
    }, []);

    const initApps = async () => {
        const res = await request('/mx/bigScreen/initApps', {});
        setAppList(JSON.parse(res))
    };

    const addApp = () => {
        setAppID('');
        setAppName('');
        setInputAppNameShow(true);
    };

    const enterApp = (item) => {
        history.push('/AppItem?appid=' + item['appid'] + '&appname=' + item['appname']);
    };

    const confirmAppNameModal = async () => {

        const res = await request('/mx/bigScreen/checkAppid', {
            appid: appID,
            appname: appName,
            userid: 'rick',
        });
        const result = JSON.parse(res);
        if (result['appnum'] > 0) {
            alert("当前应用ID已存在，请重新输入。");
            return;
        }
        const appList = JSON.parse(result['applist']);
        setAppList(appList);
        setInputAppNameShow(false);
    };

    const cancelAppNameModal = () => {
        setInputAppNameShow(false);
    };

    const changeAppName = (e) => {
        setAppName(e.target.value);
    };

    const changeAppID = (e) => {
        setAppID(e.target.value);
    };

    const previewApp = () => {

    };
    const downloadApp = async (item) => {
        await request.download('/mx/bigScreen/downloadApp', {
            appid: item['appid']
        })
    };

    const deleteApp = async (item) => {
        Modal.confirm({
            title: '提示',
            content: '是否要删除当前应用？',
            async onOk() {
                const res = await request('/mx/bigScreen/deleteAppid', {
                    appid: item['appid'],
                });
                setAppList(JSON.parse(res));
            },
            onCancel() { },
        });
    };

    //排序规则改变
    const changeSort = (e) => {
        alert(e.target.value);
    };

    //关键字搜索
    const keywordSearch = (val) => {
        alert(val);
    };

    //点击树节点
    const selectTreeNode = (node) => {
        console.log(node);
    };

    //右键点击树节点
    const rightClickTreeNode = (e) => {
        console.log(e);
        console.log(e.node.key);
    };

    const treeData = [
        {
            title: '应用',
            key: '0-0',
            children: [
                {
                    title: '分类',
                    key: '0-0-0',
                    children: [
                        {
                            title: '应用名称001',
                            key: '0-0-0-0',
                        },
                        {
                            title: '应用名称002',
                            key: '0-0-0-1',
                        }
                    ]
                }
            ],
        },
    ];

    return (
        <>
            <Layout style={{height: '100%'}}>
                <Sider collapsible collapsedWidth={0} zeroWidthTriggerStyle={{top: '50%'}}>
                    <Tree
                        showIcon
                        showLine={true}
                        defaultExpandAll
                        defaultSelectedKeys={['0-0-0']}
                        treeData={treeData}
                        onSelect={(node)=>selectTreeNode(node)}
                        onRightClick={(e)=>rightClickTreeNode(e)}
                    />
                </Sider>
                <Layout>
                    <div className={'dlc-apphome-right-filter'}>
                        <Radio.Group onChange={(e)=>changeSort(e)}>
                            <Radio.Button value="name">名称</Radio.Button>
                            <Radio.Button value="time">时间</Radio.Button>
                            <Radio.Button value="star">点赞数</Radio.Button>
                        </Radio.Group>

                        <Search placeholder="请输入应用名称" onSearch={(val)=>keywordSearch(val)} style={{ width: 250, marginLeft: 10, marginRight: 30 }} />
                    </div>

                    <div>
                        <Modal title="新建应用" visible={inputAppNameShow} onOk={() => confirmAppNameModal()} onCancel={() => cancelAppNameModal()}>
                            <Input placeholder="请输入应用ID(英文，小写)" onChange={(val) => changeAppID(val)} />
                            <br />
                            <br />
                            <Input placeholder="请输入应用名称" onChange={(val) => changeAppName(val)} />
                        </Modal>
                        <div style={{display: 'inline-block'}}>
                            <Card style={{ width: 300, marginTop: 16, marginLeft: 30, textAlign: 'center' }}>
                                <img className={'dlc-home-appList-pic'} src={addPic} style={{width: 96, height: 96}} onClick={() => addApp()} />
                            </Card>
                        </div>

                        {
                            appList.map((item, index) => {
                                // eslint-disable-next-line react/jsx-key
                                return <div style={{display: 'inline-block'}}>
                                    <Card
                                        style={{ width: 300, marginTop: 16, marginLeft: 30 }}
                                        actions={[
                                            <OneToOneOutlined key="setting" onClick={()=>previewApp()}/>,
                                            <DownloadOutlined key="edit" onClick={() => downloadApp(item)}/>,
                                            <DeleteOutlined key="ellipsis" onClick={() => deleteApp(item)}/>,
                                        ]}
                                    >
                                        <Meta
                                            title={item.appid}
                                            description={item.appname}
                                        />
                                    </Card>
                                </div>
                            })
                        }

                        <div style={{display: 'inline-block'}}>
                            <Card
                                style={{ width: 300, marginTop: 16, marginLeft: 30 }}
                                actions={[
                                    <OneToOneOutlined key="setting" onClick={()=>previewApp()}/>,
                                    <DownloadOutlined key="edit" />,
                                    <DeleteOutlined key="ellipsis"/>,
                                ]}
                            >
                                <Meta
                                    title='title'
                                    description='测试补位'
                                />
                            </Card>
                        </div>
                        <div style={{display: 'inline-block'}}>
                            <Card
                                style={{ width: 300, marginTop: 16, marginLeft: 30 }}
                                actions={[
                                    <OneToOneOutlined key="setting" onClick={()=>previewApp()}/>,
                                    <DownloadOutlined key="edit" />,
                                    <DeleteOutlined key="ellipsis"/>,
                                ]}
                            >
                                <Meta
                                    title='title'
                                    description='测试补位'
                                />
                            </Card>
                        </div>
                    </div>

                   {/* <div className={'dlc-home-appList'}>
                        <div className={'test'}>
                            <img className={'dlc-home-appList-pic'} src={addPic} onClick={() => addApp()} />
                        </div>
                        <Modal title="新建应用" visible={inputAppNameShow} onOk={() => confirmAppNameModal()} onCancel={() => cancelAppNameModal()}>
                            <Input placeholder="请输入应用ID(英文，小写)" onChange={(val) => changeAppID(val)} />
                            <br />
                            <br />
                            <Input placeholder="请输入应用名称" onChange={(val) => changeAppName(val)} />
                        </Modal>
                        {
                            appList.map((item, index) => {
                                // eslint-disable-next-line react/jsx-key
                                return <div className={'dlc-home-appList-item'}>
                                    <div className={'dlc-home-appList-item-info'} onClick={() => enterApp(item)}>
                                        <div>{item.appname}</div>
                                        <div>{item.appid}</div>
                                    </div>
                                    <div className={'dlc-home-appList-item-btn'}>
                                        <div className={'dlc-home-appList-item-btn-preview'} onClick={() => previewApp()}>预览</div>
                                        <div className={'dlc-home-appList-item-btn-download'} onClick={() => downloadApp(item)}>下载</div>
                                        <div className={'dlc-home-appList-item-btn-delete'} onClick={() => deleteApp(item)}>删除</div>
                                    </div>
                                </div>
                            })
                        }
                        <div className={'test'}></div>
                        <div className={'test'}></div>
                    </div>*/}
                </Layout>
            </Layout>
        </>
    );
}